<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="h-[10rpx]"></view>
        <view class="mx-[26rpx] flex items-center">
            <u-search class="flex-1" disabled bgColor="#fff" :showAction="false" placeholder="搜索"
                v-model="course"></u-search>
            <view @click="navigateTo('/pages/teachingSite/teachingSite')" class="flex items-center ml-[19rpx]"><text class="mr-[5rpx] text-[#3D3D3D]">教学点</text><u-icon
                    name="arrow-right" color="#575B66" size="16"></u-icon></view>
        </view>
        <view @click="navigateTo('/pages/curriculumSchedule/curriculumSchedule')"
            class="text-[34rpx] rounded ml-[26rpx] mt-[17rpx] w-[152rpx] flex py-1 items-center justify-center text-[#FD755D] border-[#FD755D] border">
            课程表</view>
        <view class="bg-[#fff] text-[#3D3D3D] font-medium">
            <u-tabs @change="change" :current="current" :list="list" lineColor="#FD755D"
                activeStyle="{ color: '#FD755D' }"></u-tabs>

            <view v-show="current == 0">
                <view class="mt-[24rpx] mb-[10rpx] ml-[23rpx] font-bold">七星社区教学点</view>
                <uni-table class="w-[100vw]" border stripe emptyText="暂无更多数据">
                    <!-- 表头行 -->
                    <uni-tr>
                        <uni-th align="center">班级</uni-th>
                        <uni-th align="center">时间起止</uni-th>
                        <uni-th align="center">课数</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr>
                        <uni-td>2024班级2</uni-td>
                        <uni-td>2024-10-12 至 2025-01-12</uni-td>
                        <uni-td>18次课</uni-td>
                    </uni-tr>
                    <uni-tr>
                        <uni-td>2024班级3</uni-td>
                        <uni-td>2024-10-12 至 2025-01-12</uni-td>
                        <uni-td>18次课</uni-td>
                    </uni-tr>

                </uni-table>
                <view class="mt-[24rpx] mb-[10rpx] ml-[23rpx] font-bold">凤详社区教学点</view>
                <uni-table class="w-[100vw]" border stripe emptyText="暂无更多数据">
                    <!-- 表头行 -->
                    <uni-tr>
                        <uni-th align="center">班级</uni-th>
                        <uni-th align="center">时间起止</uni-th>
                        <uni-th align="center">课数</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr>
                        <uni-td>2024班级2</uni-td>
                        <uni-td>2024-10-12 至 2025-01-12</uni-td>
                        <uni-td>18次课</uni-td>
                    </uni-tr>
                    <uni-tr>
                        <uni-td>2024班级3</uni-td>
                        <uni-td>2024-10-12 至 2025-01-12</uni-td>
                        <uni-td>18次课</uni-td>
                    </uni-tr>

                </uni-table>
            </view>


            <view v-show="current == 1" class="bg-[#fff] text-[#3D3D3D] font-medium">
                <view class="mt-[24rpx] mb-[10rpx] ml-[23rpx] font-bold">七星社区教学点</view>
                <view class=" border border-[#DFDFDF] px-[60rpx] font-medium">
                    <view class="mt-[26rpx]">
                        <text>上班班级：</text>
                        <text>2024班级2</text>
                    </view>
                    <view class="mt-[26rpx]">
                        <text>标题：</text>
                        <text>健康保健课</text>
                    </view>
                    <view class="mt-[26rpx]">
                        <text>上课地点：</text>
                        <text>七星路七星社区</text>
                    </view>
                    <view class="my-[26rpx]">
                        <text>上课时间：</text>
                        <text>2024-10-12 9:00-10:00</text>
                    </view>
                </view>
                <view class=" border border-[#DFDFDF] px-[60rpx] font-medium">
                    <view class="mt-[26rpx]">
                        <text>上班班级：</text>
                        <text>2024班级5</text>
                    </view>
                    <view class="mt-[26rpx]">
                        <text>标题：</text>
                        <text>插花艺术课</text>
                    </view>
                    <view class="mt-[26rpx]">
                        <text>上课地点：</text>
                        <text>七星路七星社区</text>
                    </view>
                    <view class="my-[26rpx]">
                        <text>上课时间：</text>
                        <text>2024-10-12 9:00-10:00</text>
                    </view>
                </view>
            </view>
        </view>


    </view>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
const current = ref(0)
const list = reactive([{
    name: "教学课程",

}, {
    name: "社区课程",

}, {
    name: "校外课程"
}])
const change = (info) => {
    current.value = info.index
  
}
const navigateTo =(url)=>{
  uni.navigateTo({
    url
  })
}
</script>
<style scoped></style>